<template>
  <div class="user-profile-page">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-loading-directive v-loading="true" text="加载用户信息中..." />
    </div>
    
    <!-- 用户信息展示 -->
    <div v-else class="profile-container">
      <!-- 返回按钮 -->
      <div class="back-button">
        <el-button @click="goBack" type="primary" :icon="ArrowLeft">返回</el-button>
      </div>
      
      <!-- 用户基本信息卡片 -->
      <div class="user-info-card">
        <div class="user-header">
          <div class="avatar-section">
            <div class="user-avatar">
              <img 
                :src="userInfo.avatar" 
                :alt="userInfo.username"
                class="avatar-img"
                v-if="userInfo.avatar"
              />
              <el-icon v-else class="default-avatar"><User /></el-icon>
            </div>
          </div>
          <div class="user-details">
            <h2 class="username">{{ userInfo.username || '未知用户' }}</h2>
            <div class="user-meta">
              <el-tag v-if="userInfo.schoolName" class="school-tag">{{ userInfo.schoolName }}</el-tag>
              <el-tag v-if="userInfo.major" class="major-tag">{{ userInfo.major }}</el-tag>
            </div>
          </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="user-actions">
          <el-button type="primary" @click="sendMessage" :icon="ChatDotRound">
            私信
          </el-button>
          <el-button type="success" @click="addFriend" :icon="UserFilled">
            加好友
          </el-button>
        </div>
        
        <!-- 详细信息 -->
        <el-divider />
        <div class="user-info-grid">
          <div class="info-item">
            <span class="label">学号:</span>
            <span class="value">{{ userInfo.schoolNum || userInfo.studentId || userInfo.studentNumber || '未填写' }}</span>
          </div>
          <div class="info-item">
            <span class="label">年级:</span>
            <span class="value">{{ userInfo.grade || userInfo.gradeLevel || '未填写' }}</span>
          </div>
          <div class="info-item">
            <span class="label">班级:</span>
            <span class="value">{{ userInfo.classNum || userInfo.className || userInfo.class || '未填写' }}</span>
          </div>
          <div class="info-item">
            <span class="label">邮箱:</span>
            <span class="value">{{ userInfo.email || '未填写' }}</span>
          </div>
          <div class="info-item">
            <span class="label">注册时间:</span>
            <span class="value">{{ formatDate(userInfo.createTime || userInfo.registrationTime || userInfo.registerTime) }}</span>
          </div>
        </div>
      </div>
      
      <!-- 用户帖子列表 -->
      <div class="posts-card">
        <div class="card-header">
          <h3 class="section-title">用户帖子 ({{ userPosts.length }})</h3>
        </div>
        
        <!-- 帖子列表 -->
        <div class="posts-list">
          <div v-if="userPosts.length === 0" class="empty-state">
            <div class="empty-icon">📝</div>
            <h3 class="empty-title">暂无帖子</h3>
            <p class="empty-description">这位用户还没有发布任何帖子</p>
          </div>
          <div 
            v-for="post in userPosts" 
            :key="post.id" 
            class="post-item"
          >
            <div class="post-header">
              <div class="user-avatar">
                <img 
                  class="avatar-img" 
                  :src="post.avatar || '/images/default-avatar.png'" 
                  :alt="post.username" 
                />
              </div>
              <div class="user-info">
                <div class="username">{{ post.username || '未知用户' }}</div>
                <div class="post-time">{{ formatTime(post.createTime) }}</div>
              </div>
            </div>
            <div class="post-body">
              <h3 class="post-title-text">{{ post.title || '无标题' }}</h3>
              <div class="post-content-text">{{ post.content }}</div>
              <div v-if="post.imageUrls && post.imageUrls.length > 0" class="post-images">
                <el-image 
                  v-for="(imageUrl, index) in post.imageUrls" 
                  :key="index"
                  :src="imageUrl" 
                  class="post-image"
                  fit="contain"
                  :preview-src-list="post.imageUrls"
                  :initial-index="index"
                />
              </div>
            </div>
            <div class="post-actions">
              <div class="action-btn like-btn" :class="{ 'liked': post.isLiked }" @click="toggleLike(post)">
                <el-icon>
                  <svg v-if="post.isLiked" viewBox="0 0 1024 1024" width="16" height="16">
                    <path d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 0 0 471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.8-5.4 99.3-41.3 180.7-131 180.7-235.1 0-52.7-19.7-101.9-55.9-139.5z" fill="currentColor"/>
                  </svg>
                  <svg v-else viewBox="0 0 1024 1024" width="16" height="16">
                    <path d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 0 0 471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.8-5.4 99.3-41.3 180.7-131 180.7-235.1 0-52.7-19.7-101.9-55.9-139.5zM720 704H256V512h464v192zm64 0V512c0-17.7-14.3-32-32-32H240c-17.7 0-32 14.3-32 32v192c0 17.7 14.3 32 32 32h512c17.7 0 32-14.3 32-32z" fill="currentColor"/>
                  </svg>
                </el-icon>
                <span class="action-count">{{ post.likeCount || 0 }}</span>
              </div>
              <div class="action-btn comment-btn" @click="showComments(post)">
                <el-icon><ChatRound /></el-icon>
                <span class="action-text">评论</span>
                <span class="action-count">{{ post.commentCount || 0 }}</span>
              </div>
              <div class="action-btn share-btn">
                <el-icon><Share /></el-icon>
                <span class="action-text">分享</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 评论对话框 -->
    <el-dialog
      v-model="showCommentsDialog"
      :title="`评论 (${comments.length})`"
      width="90%"
      :modal="true"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
      :show-close="true"
      :destroy-on-close="false"
      :append-to-body="true"
      :lock-scroll="true"
      @close="() => { showCommentsDialog = false; comments = []; }"
      :before-close="() => { showCommentsDialog = false; comments = []; }"
      custom-class="comments-dialog-custom"
      :style="{ maxWidth: '800px' }"
    >
      <!-- 评论列表 -->
      <div class="comments-container">
        <!-- 加载状态 -->
        <div v-if="loadingComments" class="loading-comments">
          <el-icon class="is-loading"><Loading /></el-icon>
          <span>加载评论中...</span>
        </div>
        
        <!-- 无评论状态 -->
        <div v-else-if="comments.length === 0" class="no-comments">
          <el-icon><ChatRound /></el-icon>
          <span>暂无评论，快来抢沙发吧！</span>
        </div>
        
        <!-- 评论列表 -->
        <div v-else class="comments-list">
          <div v-for="comment in comments" :key="comment.id" class="comment-item">
            <div class="comment-header">
              <div class="comment-user">
                <img 
                  class="comment-avatar" 
                  :src="comment.avatar || '/images/default-avatar.png'" 
                  :alt="comment.username"
                >
                <span class="comment-username">{{ comment.username || '匿名用户' }}</span>
              </div>
              <div class="comment-actions">
                <span class="comment-time">{{ formatCommentTime(comment.createTime) }}</span>
                <el-button 
                  v-if="comment.userId === getCurrentUserId()" 
                  type="danger" 
                  size="small" 
                  text 
                  @click="handleDeleteComment(comment)"
                >
                  删除
                </el-button>
              </div>
            </div>
            <div class="comment-content">{{ comment.content }}</div>
          </div>
        </div>
      </div>
      
      <!-- 添加评论区域 -->
      <div class="add-comment-section">
        <el-input
          v-model="newComment"
          type="textarea"
          placeholder="写下你的评论..."
          :rows="3"
          maxlength="500"
          show-word-limit
          class="comment-input"
        />
        <div class="comment-submit">
          <el-button type="primary" @click="submitComment" :disabled="!newComment.trim()">
            发表评论
          </el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 聊天窗口 -->
    <ChatWindow
      v-if="showChatWindow"
      :visible="showChatWindow"
      :chat-user="userInfo"
      :current-user-id="currentUser.id"
      :current-user-avatar="currentUser.avatar"
      @close="closeChatWindow"
      @minimize="minimizeChatWindow"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElLoading } from 'element-plus'
import { error } from '@/utils/alert'
import { ArrowLeft, User, ThumbUpFilled, ChatRound, Share, Loading, ChatDotRound, UserFilled } from '@element-plus/icons-vue'
import request from '@/utils/request'
import { likePost, unlikePost, getComments, addComment, deleteComment, getUserPosts } from '@/api/post'
import { success, info, error as showError } from '@/utils/alert'
import ChatWindow from '@/components/ChatWindow.vue'

const route = useRoute()
const router = useRouter()

// 响应式数据
const loading = ref(false)
const userInfo = ref({})
const userPosts = ref([])
const userId = ref(route.params.userId)

// 评论相关状态
const showCommentsDialog = ref(false)
const comments = ref([])
const newComment = ref('')
const loadingComments = ref(false)
const currentPost = ref(null)

// 聊天相关状态
const showChatWindow = ref(false)
const currentUser = ref({})

// 获取当前用户信息
const getCurrentUser = async () => {
  try {
    const token = localStorage.getItem('token')
    if (!token) return
    
    const response = await request({
      url: 'auth/profile',
      method: 'get'
    })
    
    if (response.success) {
      currentUser.value = response.user || response.data || response
    } else if (response.data) {
      currentUser.value = response.data
    }
  } catch (error) {
    console.error('获取当前用户信息失败:', error)
  }
}

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const response = await request({
      url: `auth/user/${userId.value}`,
      method: 'get'
    })
    
    if (response.success) {
      userInfo.value = response.user || response.data || response
    } else if (response.data) {
      // 尝试直接使用data字段
      userInfo.value = response.data
    } else {
      throw new Error(response.message || '获取用户信息失败')
    }
    
  } catch (err) {
    console.error('获取用户信息失败:', err)
    showError(err.message || '获取用户信息失败')
    throw err
  }
}

// 获取用户帖子
const fetchUserPosts = async (page = 1, size = 20) => {
  try {
    const response = await getUserPosts(userId.value, page, size)
    
    userPosts.value = response.data || []
    
    // 如果还是空，尝试其他字段
    if (!userPosts.value || userPosts.value.length === 0) {
      userPosts.value = response.posts || response.result || response.list || []
    }
    
    // 为每个帖子添加默认的点赞状态
    userPosts.value = userPosts.value.map(post => {
      return {
        ...post,
        likeCount: post.likeCount || 0,
        isLiked: post.isLiked || false
      }
    })
    
  } catch (error) {
    console.error('获取用户帖子失败:', error)
    userPosts.value = []
    if (error.message?.includes('Network Error')) {
      error('网络连接失败，无法获取用户帖子')
    }
  }
}

// 加载所有数据
const loadUserData = async () => {
  if (!userId.value || isNaN(userId.value)) {
    showError('用户ID无效')
    router.go(-1)
    return
  }
  
  loading.value = true
  
  try {
    // 并行获取用户信息和帖子
    await Promise.all([
      fetchUserInfo(),
      fetchUserPosts(),
      getCurrentUser()
    ])
  } catch (err) {
    console.error('加载用户数据失败:', err)
    if (err.message?.includes('Network Error')) {
      showError('网络连接失败，请检查后端服务是否启动')
    } else {
      showError('加载用户数据失败，请稍后重试')
    }
  } finally {
    loading.value = false
  }
}

// 格式化时间
const formatTime = (timeStr) => {
  if (!timeStr) return '未知时间'
  
  const time = new Date(timeStr)
  const now = new Date()
  const diff = now - time
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (minutes < 1) return '刚刚'
  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  if (days < 7) return `${days}天前`
  
  return time.toLocaleDateString('zh-CN')
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '未知'
  return new Date(dateStr).toLocaleDateString('zh-CN')
}

// 点赞功能
const toggleLike = async (post) => {
  const originalLikedState = post.isLiked
  const originalLikeCount = post.likeCount

  // 立即更新UI
  post.isLiked = !post.isLiked
  if (post.isLiked) {
    post.likeCount++
  } else {
    post.likeCount--
  }

  try {
    if (post.isLiked) {
      await likePost(post.id)
      success('点赞成功')
    } else {
      await unlikePost(post.id)
      info('取消点赞')
    }
  } catch (error) {
    // 如果API调用失败，则恢复原始状态
    post.isLiked = originalLikedState
    post.likeCount = originalLikeCount
    showError('操作失败，请重试')
    console.error('点赞/取消点赞失败:', error)
  }
}

// 评论相关功能
const showComments = async (post) => {
  currentPost.value = post
  showCommentsDialog.value = true
  await loadComments(post.id, 1, 20) // 个人主页显示更多评论
}

const loadComments = async (postId, page = 1, size = 10) => {
  loadingComments.value = true
  try {
    const response = await getComments(postId, page, size)
    comments.value = Array.isArray(response.data) ? response.data : []
  } catch (error) {
    console.error('加载评论失败:', error)
    comments.value = []
    showError('加载评论失败')
  } finally {
    loadingComments.value = false
  }
}

const submitComment = async () => {
  if (!newComment.value.trim()) {
    showError('请输入评论内容')
    return
  }
  
  try {
    const commentData = {
      postId: currentPost.value.id,
      content: newComment.value.trim(),
      parentId: 0 // 顶级评论
    }
    
    await addComment(commentData)
    success('评论发表成功')
    newComment.value = ''
    
    // 重新加载评论
    await loadComments(currentPost.value.id, 1, 20)
    
    // 更新帖子的评论数
    if (currentPost.value) {
      currentPost.value.commentCount = (currentPost.value.commentCount || 0) + 1
    }
  } catch (error) {
    console.error('发表评论失败:', error)
    showError('发表评论失败')
  }
}

const handleDeleteComment = async (comment) => {
  try {
    await deleteComment(comment.id)
    success('评论删除成功')
    
    // 重新加载评论
    await loadComments(currentPost.value.id, 1, 20)
    
    // 更新帖子的评论数
    if (currentPost.value && currentPost.value.commentCount > 0) {
      currentPost.value.commentCount = currentPost.value.commentCount - 1
    }
  } catch (error) {
    console.error('删除评论失败:', error)
    showError('删除评论失败')
  }
}

const formatCommentTime = (timeStr) => {
  if (!timeStr) return '未知时间'
  
  const time = new Date(timeStr)
  const now = new Date()
  const diff = now - time
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (minutes < 1) return '刚刚'
  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  if (days < 7) return `${days}天前`
  
  return time.toLocaleDateString('zh-CN')
}

const getCurrentUserId = () => {
  const token = localStorage.getItem('token');
  if (!token) return null;
  
  try {
    // 解析JWT token获取用户ID
    const payload = JSON.parse(atob(token.split('.')[1]));
    // JWT的subject字段存储的是用户ID
    return payload.sub ? parseInt(payload.sub) : null;
  } catch (error) {
    console.error('解析token失败:', error);
    return null;
  }
}

// 私信功能
const sendMessage = () => {
  // 检查是否为自己
  if (currentUser.value.id && currentUser.value.id == userId.value) {
    info('不能给自己发私信哦')
    return
  }
  
  // 检查是否已登录
  if (!currentUser.value.id) {
    showError('请先登录')
    return
  }
  
  // 打开聊天窗口
  showChatWindow.value = true
}

// 关闭聊天窗口
const closeChatWindow = () => {
  showChatWindow.value = false
}

// 最小化聊天窗口
const minimizeChatWindow = () => {
  showChatWindow.value = false
}

// 加好友功能
const addFriend = async () => {
  try {
    // TODO: 调用加好友API
    const response = await request({
      url: 'friends/add',
      method: 'post',
      data: {
        friendId: userId.value
      }
    })
    
    if (response.success) {
      success('好友申请已发送！')
      // 发送事件通知刷新通知中心
      window.dispatchEvent(new CustomEvent('friendRequestSent'));
    } else {
      showError(response.message || '发送好友申请失败')
    }
  } catch (error) {
    console.error('加好友失败:', error)
    if (error.response?.status === 400) {
      info('你们已经是好友了')
    } else {
      showError('发送好友申请失败，请稍后重试')
    }
  }
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 组件挂载时加载数据
onMounted(() => {
  loadUserData()
})
</script>

<style scoped>
.user-profile-page {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  height: auto;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
}

.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  height: auto;
  min-height: auto;
}

.back-button {
  margin-bottom: 20px;
}

.back-button .el-button {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(102, 126, 234, 0.3) !important;
  color: #667eea !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.back-button .el-button:hover {
  background: rgba(102, 126, 234, 0.1) !important;
  border-color: rgba(102, 126, 234, 0.5) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2) !important;
}

/* 用户信息卡片样式 - 与交流广场保持一致 */
.user-info-card {
  padding: 32px;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

/* 用户头部样式 - 与交流广场帖子头部保持一致 */
.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.user-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 2px;
  margin-right: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #f8f9fa;
}

.default-avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.user-details {
  flex: 1;
}

.username {
  font-weight: 600;
  font-size: 20px;
  color: #1f2937;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  cursor: pointer;
  transition: all 0.3s ease;
}

.username:hover {
  transform: translateX(2px);
  filter: brightness(1.2);
}

.user-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.school-tag, .major-tag {
  background: rgba(102, 126, 234, 0.1) !important;
  border: 1px solid rgba(102, 126, 234, 0.2) !important;
  color: #667eea !important;
  border-radius: 12px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.major-tag {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
  color: #10b981 !important;
}

/* 用户操作按钮样式 */
.user-actions {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  justify-content: center;
}

.user-actions .el-button {
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: none !important;
}

.user-actions .el-button--primary {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  color: white !important;
}

.user-actions .el-button--primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3) !important;
  filter: brightness(1.1) !important;
}

.user-actions .el-button--success {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: white !important;
}

.user-actions .el-button--success:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3) !important;
  filter: brightness(1.1) !important;
}

.user-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.info-item {
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 15px;
  border: 1px solid rgba(102, 126, 234, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.info-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(102, 126, 234, 0.4);
}

.info-item .label {
  display: block;
  color: #667eea;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-item .value {
  color: #1f2937;
  font-size: 18px;
  font-weight: 700;
  text-shadow: none;
}

/* 帖子卡片样式 - 与交流广场保持一致 */
.posts-card {
  margin-top: 24px;
  padding: 32px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: auto;
  overflow: visible;
}

.posts-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

.card-header {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.posts-list {
  /* 移除固定高度限制，让帖子完整显示 */
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* 帖子项样式 - 与交流广场帖子保持一致 */
.post-item {
  padding: 28px;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: auto;
  overflow: visible;
}

.post-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

/* 帖子头部样式 */
.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.post-header .user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 2px;
  margin-right: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.post-header .user-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.post-header .avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #f8f9fa;
}

.post-header .user-info {
  flex: 1;
}

.post-header .username {
  font-weight: 600;
  font-size: 16px;
  color: #1f2937;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  cursor: pointer;
  transition: all 0.3s ease;
}

.post-header .username:hover {
  transform: translateX(2px);
  filter: brightness(1.2);
}

.post-time {
  font-size: 13px;
  color: #6b7280;
  font-weight: 400;
}

/* 帖子内容样式 */
.post-body {
  margin-bottom: 16px;
}

.post-title-text {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.post-content-text {
  font-size: 16px;
  line-height: 1.8;
  color: #374151;
  margin-bottom: 16px;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.3px;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: pre-wrap;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

:deep(.post-images) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 15px;
  align-items: flex-start;
  width: 100%;
  padding: 10px 0;
}

:deep(.post-image) {
  width: 200px;
  height: 200px;
  display: inline-block;
}
:deep(.post-image img) {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  background-color: #f9f9f9;
}



/* 帖子操作按钮样式 */
.post-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 12px;
  border-top: 1px solid rgba(102, 126, 234, 0.05);
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(102, 126, 234, 0.05);
  border: 1px solid rgba(102, 126, 234, 0.1);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
}

.action-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  border-color: rgba(102, 126, 234, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.like-btn {
  color: #667eea;
}

.like-btn.liked {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.like-btn.liked:hover {
  background: rgba(239, 68, 68, 0.15);
}

.like-btn.liked .el-icon {
  color: #ef4444;
}

.comment-btn {
  color: #10b981;
}

.share-btn {
  color: #f59e0b;
}

.action-count, .action-text {
  font-size: 13px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.6;
}

.empty-title {
  margin: 0 0 12px 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.empty-description {
  margin: 0;
  color: #95a5a6;
  font-size: 16px;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-profile-page {
    padding: 12px;
  }
  
  .profile-container {
    max-width: 100%;
    margin: 0 8px;
  }
  
  .user-info-card {
    padding: 20px;
    margin-bottom: 16px;
  }
  
  .user-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .user-avatar {
    margin-right: 0;
    margin-bottom: 0;
  }
  
  .user-info-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .username {
    font-size: 22px;
    margin-bottom: 8px;
  }
  
  .posts-card {
    padding: 20px;
    margin-top: 16px;
  }
  
  .post-item {
    padding: 16px;
    margin-bottom: 12px;
  }
  
  .post-title {
    font-size: 18px;
  }
  
  .post-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .post-time {
    align-self: flex-end;
  }
  
  .post-stats {
    gap: 16px;
    flex-wrap: wrap;
  }
  
  .post-images {
    gap: 8px;
  }

  .post-image {
    border-radius: 8px;
  }
  
  .empty-state {
    padding: 60px 16px;
  }
  
  .empty-icon {
    font-size: 48px;
  }
  
  .empty-title {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .user-profile-page {
    padding: 8px;
  }
  
  .user-info-card {
    padding: 16px;
  }
  
  .posts-card {
    padding: 16px;
  }
  
  .post-item {
    padding: 12px;
  }
  
  .post-title {
    font-size: 16px;
  }
  
  .username {
    font-size: 20px;
  }
  
  .action-item {
    padding: 6px 10px;
    font-size: 13px;
  }
  
  .info-item {
    padding: 16px;
  }
  
  .info-item .value {
    font-size: 16px;
  }
}

/* Element Plus 组件高度优化 */
:deep(.el-card) {
  height: auto !important;
  min-height: auto !important;
}

:deep(.el-card__body) {
  height: auto !important;
  overflow: visible !important;
}

:deep(.el-divider) {
  margin: 16px 0;
}

/* 图片预览弹窗样式优化 */
:deep(.el-image-viewer__wrapper) {
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(15px);
}

:deep(.el-image-viewer__img) {
  max-width: 85vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* 关闭按钮样式 */
:deep(.el-image-viewer__close) {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 18px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.el-image-viewer__close:hover) {
  background-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.3);
}

/* 左右切换按钮样式 */
:deep(.el-image-viewer__prev),
:deep(.el-image-viewer__next) {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 16px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.el-image-viewer__prev:hover),
:deep(.el-image-viewer__next:hover) {
  background-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.3);
}

/* 隐藏工具栏中的其他图标 */
:deep(.el-image-viewer__actions) {
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 25px;
  padding: 8px 16px;
  backdrop-filter: blur(10px);
}

:deep(.el-image-viewer__actions .el-image-viewer__actions__inner) {
  gap: 12px;
}

:deep(.el-image-viewer__actions .el-image-viewer__actions__inner > *) {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.el-image-viewer__actions .el-image-viewer__actions__inner > *:hover) {
  background-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.3);
}
/* 评论对话框样式 - 居中显示 */
.comments-dialog-custom {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
}

/* 全局样式覆盖 */
:deep(.el-dialog__wrapper) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

:deep(.comments-dialog-custom) {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
}

.comments-container {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.loading-comments {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #666;
  gap: 10px;
}

.no-comments {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #999;
  gap: 10px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.comment-item {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 3px solid #409eff;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.comment-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.comment-username {
  font-weight: 500;
  color: #333;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

.comment-content {
  color: #555;
  line-height: 1.5;
  word-wrap: break-word;
}

.add-comment-section {
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.comment-input {
  margin-bottom: 15px;
}

.comment-submit {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .comments-dialog {
    top: 5% !important;
    width: 95% !important;
  }
  
  .comment-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .comment-actions {
    align-self: flex-end;
  }
}
</style>